import React, { useRef, useState } from 'react';
import PageTitle from '@/components/PageTitle';
import { Button, DatePicker, Input, Modal, Typography } from 'antd';
import Tables from '@/hoc/Tables';
import styles from './index.less';
import { LOG_LIST } from '@/services/list';
import PageInfoSearch from '@/components/PageInfoSearch';
import moment from 'moment';

const { RangePicker } = DatePicker;

const { Text } = Typography;

const Log = props => {
  const childRef = useRef();
  let {
    route: { name },
  } = props;

  let columns: any[] = [
    {
      title: () => <b>序号</b>,
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: () => <b>操作模块</b>,
      dataIndex: 'operModul',
      key: 'operModul',
      width: 150,
    },
    {
      title: () => <b>操作类型</b>,
      dataIndex: 'operType',
      key: 'operType',
      width: 100,
    },
    {
      title: () => <b>操作描述</b>,
      dataIndex: 'operDesc',
      key: 'operDesc',
      width: 200,
    },
    {
      title: () => <b>用户名</b>,
      dataIndex: 'operUserName',
      key: 'operUserName',
      width: 120,
    },
    {
      title: () => <b>操作方法</b>,
      dataIndex: 'operMethod',
      key: 'operMethod',
      width: 250,
    },
    {
      title: () => <b>请求URL</b>,
      dataIndex: 'operUri',
      key: 'operUri',
      width: 200,
    },
    {
      title: () => <b>请求IP</b>,
      dataIndex: 'crtHost',
      key: 'crtHost',
      width: 100,
    },
    {
      title: () => <b>操作时间</b>,
      dataIndex: 'crtTime',
      key: 'crtTime',
      width: 180,
    },
    {
      title: () => <b>操作</b>,
      render: (_, text: any) => (
        <div className="operation">
          <Text
            onClick={() => {
              setVisible(true);
              setItemObj(text);
            }}>
            查看详情
          </Text>
        </div>
      ),
    },
  ];
  const [visible, setVisible] = useState<boolean>(false);
  const [itemObj, setItemObj] = useState<any>({});
  const [courierNumber, setCourierNumber] = useState<string>('');
  const [dates, setDates] = useState([]);
  const [hackValue, setHackValue] = useState();
  const [value, setValue] = useState();

  /**
   * 动态禁用时间
   */
  const disabledDate = (current: any) => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 30;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 30;
    return tooEarly || tooLate;
  };

  /**
   * 选择的时间
   * @param open
   */
  const onOpenChange = open => {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };

  /**
   * 关闭弹框
   */
  const handleClose = () => {
    setVisible(false);
    setItemObj({});
  };

  return (
    <div className={styles.regimePage}>
      <PageTitle title={name} />
      <PageInfoSearch>
        <Input style={{ width: 150 }} onChange={e => setCourierNumber(e.target.value)} placeholder="请输入操作用户" allowClear />

        <RangePicker
          style={{ marginLeft: 20 }}
          value={hackValue || value}
          disabledDate={disabledDate}
          onCalendarChange={val => setDates(val)}
          onChange={val => setValue(val)}
          onOpenChange={onOpenChange}
          placeholder={['请选择开始时间', '请选择结束时间']}
        />

        <Button
          onClick={() => {
            childRef.current.setQuery({});
          }}
          style={{ marginLeft: 20 }}
          className="btn_cold">
          查询
        </Button>
      </PageInfoSearch>

      <div className="regime_table">
        <Tables
          option={{
            searchName: courierNumber,
            startTime: value?.[0] ? moment(value?.[0]).format('YYYY-MM-DD') : '',
            endTime: value?.[1] ? moment(value?.[1]).format('YYYY-MM-DD') : '',
          }}
          childRef={childRef}
          url={LOG_LIST}
          columns={columns}
        />
      </div>

      <Modal title={null} visible={visible} onCancel={handleClose} footer={null} width={800}>
        <div>
          <ul className={styles.modaldetail}>
            <li>
              <span>操作模块：</span>
              <p>{itemObj?.operModul}</p>
            </li>
            <li>
              <span>操作类型：</span>
              <p>{itemObj?.operType}</p>
            </li>
            <li>
              <span>操作描述：</span>
              <p>{itemObj?.operDesc}</p>
            </li>
            <li>
              <span>请求参数：</span>
              <p>{itemObj?.operRequParam}</p>
            </li>
            <li>
              <span>返回参数：</span>
              <p>{itemObj?.operRespParam}</p>
            </li>
            <li>
              <span>操作方法：</span>
              <p>{itemObj?.operMethod}</p>
            </li>
            <li>
              <span>请求URL：</span>
              <p>{itemObj?.operUri}</p>
            </li>
            <li>
              <span>请求IP：</span>
              <p>{itemObj?.crtHost}</p>
            </li>
            <li>
              <span>用户名：</span>
              <p>{itemObj?.operUserName}</p>
            </li>
            <li>
              <span>操作时间：</span>
              <p>{itemObj?.crtTime}</p>
            </li>
          </ul>
        </div>
      </Modal>
    </div>
  );
};

export default Log;
